<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <el-form ref="form" label-width="80px" size="small">
          <el-form-item label="关键字">
            <!-- 输入框 -->
            <el-input
              v-model="input"
              placeholder="根据编号搜索"
              style="width: 300px"
            ></el-input>
            <!-- 按钮21 -->
            <div class="btn">
              <el-button @click="empty">清除</el-button>
              <el-button type="primary" @click="searchProblem">搜索</el-button>
            </div>
          </el-form-item>
        </el-form>

        <el-alert :title="totalInfo" type="info" :closable="false" show-icon />
        <!-- 表格 -->
          <el-table class="el-table" :data="items" style="width: 100%">
              <el-table-column  prop="id" label="编号"  />
              <el-table-column  prop="questionType" label="题型" :formatter="formatter" />
              <el-table-column  label="题目编号">
                <template #default="{ row: { questionIDs } }">
                  <div
                    @click="previewTopic(item)"
                    v-for="item in questionIDs"
                    :key="item.number"
                    style="color: rgb(0, 153, 255); cursor: pointer"
                  >
                    {{ item.number }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column  prop="addTime"  label="录入时间" />
              <el-table-column  prop="totalSeconds" label="答题时间(s)" />
              <el-table-column  prop="accuracyRate"  label="正确率(%)" />
              <el-table-column  prop="userName"  label="录入人" />
              <el-table-column  prop="address"  label="操作">
                <template #default="{ row }">
                  <el-button
                    type="danger"
                    plain
                    icon="el-icon-delete"
                    circle
                    @click="deleteList(row)"
                  ></el-button>
                </template>
              </el-table-column>
          </el-table>

        <el-pagination
          class=".el-pagination"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10,20, 30, 50, 100]"
          :page-size="data.pagesize"
          layout="prev,pager,next,sizes,jumper"
          :total="total"
          background
        />
      </el-card>

      <questions-preview :isShowDialog.sync="isShowDialog" :optionsList="optionsList" :topicData="topicData" :isVideo.sync="isVideo"> </questions-preview>
    </div>
  </div>
</template>

<script>
import { randoms, removeRandoms, detail } from '@/api/hmmm/questions'
import { questionType } from '@/api/hmmm/constants'
import questionsPreview from '@/module-hmmm/components/questions-preview'
export default {
  components: { questionsPreview },
  name: 'questionsRandoms',
  data () {
    return {
      questionType: questionType,
      input: '',
      items: [],
      total: 0,
      data: {
        page: 1,
        pagesize: 10,
        keyword: ''
      },
      isShowDialog: false,
      topicData: {},
      isVideo: false,
      optionsList: []
    }
  },
  created () {
    this.randomsList()
  },
  computed: {
    totalInfo () {
      return `共 ${this.total} 条记录`
    }
  },
  methods: {
    async randomsList () {
      const { data } = await randoms(this.data)
      this.items = data.items
      console.log(this.items)
      this.total = data.counts
    },
    handleSizeChange (val) {
      this.data.pagesize = val
      this.randomsList()
    },
    handleCurrentChange (val) {
      this.data.page = val
      this.randomsList()
    },
    deleteList (id) {
      // console.log(id)
      this.$confirm('此操作将永久删除该题组, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await removeRandoms(id)
        // console.log(res)
        // console.log(id)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        if (this.items.length === 1 && this.data.page > 1) {
          this.data.page--
        }
        this.randomsList()
      })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    searchProblem () {
      this.data.keyword = this.input
      this.data.page = 1
      this.randomsList()
    },
    empty () {
      this.input = this.data.keyword = ''
      this.randomsList()
    },
    formatter (row, column, cellValue, index) {
      const topic = questionType.find((item) => item.value === Number(cellValue))
      return topic ? topic.label : '未知'
    },
    async previewTopic (previewdata) {
      this.isShowDialog = true
      const { data } = await detail(previewdata)
      this.topicData = data
      this.optionsList = data.options
    }
  }
}
</script>

<style lang="scss" scoped>
.btn {
  float: right;
}
.el-table {
  margin: 10px 0;
}
.el-pagination {
  float: right;
  margin: 15px 0;
}
</style>
